<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="header">
				<view class="points">
					<view class="points_point">
						{{ pointsTotal }}
					</view>
					<view class="points_pre">
						分
					</view>
				</view>
				<view class="header_bottom">
					<text>我的这些积分都可以<text class="red" @click="shangcheng">兑换商品</text>啦</text>
				</view>
			</view>
			<view class="titles line">
				积分详细
			</view>
			<view class="grey" v-if="total == 0">暂无</view>
			<view class="items line" v-for="(item, index) in list" :key="index" v-else>
				<view class="left">
					<view class="type">
						[ {{ item.businessName }} ]
					</view>
					<view class="title">
						{{ item.businessContent }}
					</view>
					<view class="num"
						:style="{ color: Number(item.operator + item.points) > 0 ? 'rgb(179, 173, 173)' : 'red' }">
						{{ item.operator + item.points }}
					</view>
				</view>
				<view class="right">
					{{ item.createTime }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	systemInfo
} from '../../utils/mixin'
import { pointsList } from '@/api/index.js'
export default {
	components: {},
	mixins: [systemInfo],
	data() {
		return {
			list: [],
			pointsTotal: 0,
			total: 0
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();

		this.getpointsList()
	},
	methods: {
		// 获取我的积分
		async getpointsList() {
			const res = await pointsList({})
			this.pointsTotal = res.rows[0].pointsTotal
			this.total = res.total
			if (res.total > 0) {
				res.rows.forEach(element => {
					element.createTime = element.createTime.split(' ')[0].replace(/-/g, "/")
				});
			}
			this.list = res.rows
		},
		shangcheng() {
			uni.navigateTo({
				url: "/subpackage3/shop/shop"
			})
		}
	}
}
</script>

<style lang="less" scoped>
.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.red {
		color: red;
	}

	.line {
		border-bottom: 1px solid rgba(179, 173, 173, 0.2);
	}

	.view {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		top: 30rpx;
		margin: auto;
		overflow: auto;
		border-radius: 15px;

		.header {
			margin: 90rpx 0;

			.points {
				font-size: 80rpx;
				color: red;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				font-weight: 700;

				.points_pre {
					font-size: 26rpx;
					font-weight: normal;
					margin-bottom: 16rpx;
					margin-left: 10rpx;
				}
			}

			.header_bottom {
				margin-top: 30rpx;
				font-size: 26rpx;
				color: rgb(179, 173, 173);
				text-align: center;
			}
		}

		.titles {
			font-size: 28rpx;
			color: rgb(179, 173, 173);
			line-height: 2;
		}

		.grey {
			text-align: center;
			font-size: 26rpx;
			color: rgb(179, 173, 173);
			margin-top: 50rpx;
		}

		.items {
			padding: 30rpx 0;
			width: 100%;
			box-sizing: border-box;

			.left {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 26rpx;

				.type {}

				.title {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: 10rpx;
				}
			}

			.right {
				color: rgb(179, 173, 173);
				font-size: 22rpx;
				margin-top: 30rpx;
				margin-left: 100rpx;
			}

		}
	}
}
</style>